<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-button
					text="基础使用"
					theme="primary"
					@onClick="showBaseUse = true"
					block
				></pure-button>
				<pure-popup
					:show="showBaseUse"
					@onClose="showBaseUse = false"
					:title="title"
					@onConfirm="showBaseUse = false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 关闭按钮位置 -->
			<pj-demo title="关闭按钮位置">
				<pure-flex wrap>
					<pure-button
						text="底部"
						theme="success"
						@onClick="
							() => {
								showClose = true;
								closePosition = 'bottom';
							}
						"
						block
					></pure-button>
					<pure-button
						text="右侧"
						theme="warning"
						@onClick="
							() => {
								showClose = true;
								closePosition = 'right';
							}
						"
						block
					></pure-button>
					<pure-button
						text="左侧"
						theme="danger"
						@onClick="
							() => {
								showClose = true;
								closePosition = 'left';
							}
						"
						block
					></pure-button>
				</pure-flex>
				<pure-popup
					:show="showClose"
					@onClose="showClose = false"
					:title="title"
					@onConfirm="showClose = false"
					:closePosition="closePosition"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 弹出方向 -->
			<pj-demo title="弹出方向">
				<pure-flex wrap>
					<pure-button
						text="中间"
						theme="info"
						@onClick="
							() => {
								direction = 'center';
								showDirection = true;
							}
						"
						block
					></pure-button>
					<pure-button
						text="顶部"
						theme="primary"
						@onClick="
							() => {
								direction = 'top';
								showDirection = true;
							}
						"
						block
					></pure-button>
					<pure-button
						text="底部"
						theme="success"
						@onClick="
							() => {
								direction = 'bottom';
								showDirection = true;
							}
						"
						block
					></pure-button>
					<pure-button
						text="左侧"
						theme="warning"
						@onClick="
							() => {
								direction = 'left';
								showDirection = true;
							}
						"
						block
					></pure-button>
					<pure-button
						text="右侧"
						theme="danger"
						@onClick="
							() => {
								direction = 'right';
								showDirection = true;
							}
						"
						block
					></pure-button>
				</pure-flex>
				<pure-popup
					:show="showDirection"
					@onClose="showDirection = false"
					:title="title"
					@onConfirm="showDirection = false"
					:direction="direction"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 顶部按钮 -->
			<pj-demo title="顶部按钮">
				<pure-button
					text="顶部按钮"
					theme="info"
					@onClick="showHeaderButtons = true"
					block
				></pure-button>
				<pure-popup
					showOk
					showNot
					:show="showHeaderButtons"
					@onClose="showHeaderButtons = false"
					:title="title"
					@onCancel="showHeaderButtons = false"
					@onConfirm="showHeaderButtons = false"
					@onNot="showHeaderButtons = false"
					@onOk="showHeaderButtons = false"
					direction="bottom"
					:showClose="false"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 底部按钮 -->
			<pj-demo title="底部按钮">
				<pure-button
					text="底部按钮"
					theme="primary"
					@onClick="showFooterButtons = true"
					block
				></pure-button>
				<pure-popup
					showCancel
					showConfirm
					:show="showFooterButtons"
					@onClose="showFooterButtons = false"
					:title="title"
					@onCancel="showFooterButtons = false"
					@onConfirm="showFooterButtons = false"
					direction="bottom"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 自定义宽高 -->
			<pj-demo title="自定义宽高">
				<pure-button
					text="自定义宽高"
					theme="success"
					@onClick="showCustomSize = true"
					block
				></pure-button>
				<pure-popup
					showCancel
					showConfirm
					:show="showCustomSize"
					@onClose="showCustomSize = false"
					:title="title"
					@onCancel="showCustomSize = false"
					@onConfirm="showCustomSize = false"
					direction="bottom"
					width="90%"
					max-width="600rpx"
					height="80%"
					max-height="700px"
				>
					<view class="content">
						<rich-text :nodes="content"></rich-text>
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 分割线 -->
			<pj-demo title="分割线">
				<pure-button
					text="分割线"
					theme="warning"
					@onClick="showLine = true"
					block
				></pure-button>
				<pure-popup
					showCancel
					showConfirm
					:show="showLine"
					@onClose="showLine = false"
					:title="title"
					@onCancel="showLine = false"
					@onConfirm="showLine = false"
					direction="bottom"
					headerLine
					footerLine
				>
					<view
						class="content"
						style="padding: 16px 0"
					>
						<rich-text :nodes="content"></rich-text>
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>

			<!-- 隐藏遮罩 -->
			<pj-demo title="隐藏遮罩">
				<pure-button
					text="隐藏遮罩"
					theme="danger"
					@onClick="showNotMask = true"
					block
				></pure-button>
				<pure-popup
					showCancel
					showConfirm
					:show="showNotMask"
					@onClose="showNotMask = false"
					:title="title"
					@onCancel="showNotMask = false"
					@onConfirm="showNotMask = false"
					direction="bottom"
					headerLine
					footerLine
					:mask="false"
					max-height="500px"
				>
					<view
						class="content"
						style="padding: 16px 0"
					>
						<rich-text :nodes="content"></rich-text>
						<rich-text :nodes="content"></rich-text>
					</view>
				</pure-popup>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	const showBaseUse = ref(false);
	const showClose = ref(false);
	const showDirection = ref(false);
	const showHeaderButtons = ref(false);
	const showFooterButtons = ref(false);
	const closePosition = ref("center");
	const direction = ref("center");
	const showCustomSize = ref(false);
	const showLine = ref(false);
	const showNotMask = ref(false);

	// 内容
	const title = ref("《将近酒》");
	const content = ref(`
		<p>君不见，黄河之水天上来，奔流到海不复回。</p>
		<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
		<p>人生得意须尽欢，莫使金樽空对月。</p>
		<p>天生我材必有用，千金散尽还复来。</p>
		<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
		<p>岑夫子，丹丘生，将进酒，君莫停。</p>
		<p>与君歌一曲，请君为我倾耳听。</p>
		<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
		<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
		<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
		<p>主人何为言少钱，径须沽取对君酌。</p>
		<p>五花马，千金裘，</p>
		<p>呼儿将出换美酒，与尔同销万古愁。</p>
	`);
</script>

<!-- 自定义动画不要放到 scoped 中，因为编译后名称会变，导致不生效 -->
<style lang="scss" scoped>
	.page {
		.content {
			line-height: 1.75;
			text-align: justify;
		}

		.footer {
			font-size: var(--pure-font-size-small);
			color: var(--pure-text-color-ragular);
			text-align: right;
			padding: 10px 16px;
			width: 100%;
			background: var(--pure-background-light);
		}
	}
</style>
